<#include "../include/header.html">
<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid");
</script>
<script src="${base.contextPath}/common/code?testBankNum=TEST_BANK_NUM" type="text/javascript"></script>
<script src="${base.contextPath}/common/code?studyCurrencyCode=STUDY_CURRENCY_CODE" type="text/javascript"></script>
<script src="${base.contextPath}/common/code?yesNo=SYS.YES_NO" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
        integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
        crossorigin="anonymous"></script>
<body>
<div id="page-content">
    <div class="pull-left" id="toolbar-btn" style="padding-bottom:10px;">
        <span class="btn btn-primary k-grid-add" onclick="openTransferForm()"
              style="float:left;margin-right:5px;">转账</span>
        <span class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;" data-bind="click:create"><@spring.message "hap.new"/></span>
        <span class="btn btn-success k-grid-save-changes" data-bind="click:save" style="float:left;margin-right:5px;"><@spring.message "hap.save"/></span>
        <span data-bind="click:remove" class="btn btn-danger" style="float:left;"><@spring.message "hap.delete"/></span>
    </div>
    <script>kendo.bind($('#toolbar-btn'), viewModel);</script>
    <div class="pull-right" id="query-form" style="padding-bottom:10px;">
        <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;" placeholder=‘公司'
               data-bind="value:model.company" class="k-textbox">
        <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;" placeholder='部门'
               data-bind="value:model.department" class="k-textbox">
        <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;" placeholder='员工'
               data-bind="value:model.empName" class="k-textbox">
        <button style="float:left;width:150px;margin-right:5px;" class="btn btn-primary" type="button"
                data-toggle="collapse" data-target="#collapseExample" aria-expanded="false"
                aria-controls="collapseExample">
            更多查询
        </button>

        <span class="btn btn-primary" style="float:left;width:70px" data-bind="click:query" type="submit"><@spring.message "hap.query"/></span>
        <div style="clear:both"></div>
        <div class="collapse" id="collapseExample" style="margin-top: 5px">
            <div class="card card-body">
                <input id="bankNum" type="text" data-role="maskedtextbox"
                       style="float:left;width:150px;margin-right:5px;" placeholder='所属银行'
                       data-bind="value:model.bankNum" class="k-textbox">
                <script>
                    $("#bankNum").kendoComboBox({
                        dataTextField: "meaning",
                        dataValueField: "value",
                        valuePrimitive: true,
                        dataSource: testBankNum
                    });
                </script>
                <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;"
                       placeholder='<@spring.message "HandAccount.bankAccountnum"/>'
                       data-bind="value:model.bankAccountNum" class="k-textbox">
                <input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;"
                       placeholder='<@spring.message "HandAccount.bankAccountname"/>'
                       data-bind="value:model.bankAccountName" class="k-textbox">
                <br />
                <div style="margin-top: 20px">
                <input type="text" data-role="maskedtextbox" style="width:150px;margin-right:5px;"
                       placeholder='账户余额从'
                       data-bind="value:model.amountFrom" class="k-textbox">——
                <input type="text" data-role="maskedtextbox" style="width:150px;margin-right:5px;"
                       placeholder='至'
                       data-bind="value:model.amountTo" class="k-textbox">
                </div>
                <div style="margin-top: 5px">
                    <input type="text" data-role="maskedtextbox" style="width:150px;margin-right:5px;"
                           placeholder='开户日期从'
                           data-bind="" class="k-textbox">——
                    <input type="text" data-role="maskedtextbox" style="width:150px;margin-right:5px;"
                           placeholder='至'
                           data-bind="" class="k-textbox">
                </div>
                <div style="margin-top: 5px">
                    <input id="primaryFlag" type="text" data-role="maskedtextbox" style="width:150px;margin-right:5px;"
                           placeholder='<@spring.message "HandAccount.primaryflag"/>'
                           data-bind="value:model.primaryFlag" class="k-textbox">
                    <input id="enabledFlag" type="text" data-role="maskedtextbox" style="width:150px;margin-right:5px;"
                           placeholder='<@spring.message "HandAccount.enabledflag"/>'
                           data-bind="value:model.enabledFlag" class="k-textbox">
                    <script>
                        $("#primaryFlag").kendoComboBox({
                            dataTextField: "meaning",
                            dataValueField: "value",
                            valuePrimitive: true,
                            dataSource: yesNo
                        });
                        $("#enabledFlag").kendoComboBox({
                            dataTextField: "meaning",
                            dataValueField: "value",
                            valuePrimitive: true,
                            dataSource: yesNo
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

    <script>kendo.bind($('#query-form'), viewModel);</script>
    <div style="clear:both">
        <div id="grid"></div>
    </div>
</div>

<script type="text/javascript">
    Hap.initEnterQuery('#query-form', viewModel.query);
    var BaseUrl = _basePath;
    var onChange = false;
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/test/accountInfo/query",
                type: "POST",
                dataType: "json"
            },
            update: {
                url: BaseUrl + "/test/accountInfo/submit",
                type: "POST",
                contentType: "application/json"
            },
            destroy: {
                url: BaseUrl + "/test/account/remove",
                type: "POST",
                contentType: "application/json"
            },
            create: {
                url: BaseUrl + "/test/account/submit",
                type: "POST",
                contentType: "application/json"
            },
            parameterMap: function (options, type) {
                if (type !== "read" && options.models) {
                    var datas = Hap.prepareSubmitParameter(options, type)
                    return kendo.stringify(datas);
                } else if (type === "read") {
                    return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 10,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "accountId",
                fields: {},

                editable: function (col) {
                    if (!onChange) {
                        return !("bankAccountName" === col || "company" === col || "department" === col);
                    } else {
                        return true
                    }


                }

            }
        }
    });

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        scrollable: true,
        navigatable: false,
        selectable: 'multiple, rowbox',
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "accountId",
                width: 0
            },
            {
                // 账户号
                field: "bankAccountNum",
                title: '<@spring.message "handaccount.bankaccountnum"/>',
                width: 120,
                editor: function (container, options) {
                    lov = "BANK_ACCOUNT_LOV";
                    jQuery('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoLov({
                            contextPath: _basePath,
                            locale: _locale,
                            code: lov,
                            model: options.model,
                            textField: 'bankAccountNum',
                            select: function (e) {
                                var data = e.item;
                                options.model.set("bankAccountName", data.bankAccountName);
                            }
                        });
                }
            },
            {
                // 账户名
                field: "bankAccountName",
                title: '<@spring.message "handaccount.bankaccountname"/>',
                width: 120
            },
            {
                // 员工姓名
                field: "empName",
                title: '员工姓名',
                width: 120,
                editor: function (container, options) {
                    lov = "BANK_USER_LOV";
                    jQuery('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoLov({
                            contextPath: _basePath,
                            locale: _locale,
                            code: lov,
                            model: options.model,
                            textField: 'empName',
                            select: function (e) {
                                onChange = true;
                                var data = e.item;
                                options.model.set("empName", data.empName);
                                options.model.set("company", data.company);
                                options.model.set("department", data.department);
                                onChange = false;
                            }
                        });
                }
            },
            {
                // 公司
                field: "company",
                title: '公司',
                width: 120
            },
            {
                // 部门
                field: "department",
                title: '部门',
                width: 120
            },
            {
                // 所属银行
                field: "bankNum",
                title: '<@spring.message "handaccount.banknum"/>',
                width: 120,
                editor: function (container, options) {
                    lov = "TEST_BANK_NUM";
                    jQuery('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            contextPath: _basePath,
                            locale: _locale,
                            code: lov,
                            model: options.model,
                            dataTextField: "meaning",
                            dataValueField: "value",
                            dataSource: testBankNum,
                            select: function (e) {
                                var data = e.item[0];
                                options.model.set("bankNum", data.innerText);
                                kendo.bind('bankNum', viewModel);
                            },
                        });
                }
            },
            {
                // 是否启用
                field: "enabledFlag",
                title: '<@spring.message "handaccount.enabledflag"/>',
                width: 120,
                editor: function (container, options) {
                    lov = "SYS.YES_NO";
                    jQuery('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            contextPath: _basePath,
                            locale: _locale,
                            code: lov,
                            model: options.model,
                            dataTextField: "meaning",
                            dataValueField: "value",
                            dataSource: yesNo,
                            select: function (e) {
                                var data = e.dataItem;
                                console.log(e)
                                options.model.set("enabledFlag", data.value);
                                kendo.bind('enabledFlag', viewModel);
                            },
                        });
                }
            },
            {
                // 是否是主账户
                field: "primaryFlag",
                title: '<@spring.message "handaccount.primaryflag"/>',
                width: 120,
                editor: function (container, options) {
                    lov = "SYS.YES_NO";
                    jQuery('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            contextPath: _basePath,
                            locale: _locale,
                            code: lov,
                            model: options.model,
                            dataTextField: "meaning",
                            dataValueField: "value",
                            dataSource: yesNo,
                            select: function (e) {
                                var data = e.dataItem;
                                options.model.set("primaryFlag", data.value);
                                kendo.bind('primaryFlag', viewModel);
                            },
                        });
                }
            },
            {
                // 账户余额
                field: "amount",
                title: '<@spring.message "handaccount.amount"/>',
                width: 120
            },
            {
                // 币种
                field: "currencyCode",
                title: '<@spring.message "handaccount.currencycode"/>',
                width: 120,
                editor: function (container, options) {
                    lov = "STUDY_CURRENCY_CODE";
                    jQuery('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            contextPath: _basePath,
                            locale: _locale,
                            code: lov,
                            model: options.model,
                            dataTextField: "meaning",
                            dataValueField: "value",
                            dataSource: studyCurrencyCode,
                            select: function (e) {
                                var data = e.item[0];
                                options.model.set("currencyCode", data.innerText);
                                kendo.bind('currencyCode', viewModel);
                            },
                        });
                }
            },
            {
                // 开户日期
                field: "accountDate",
                title: '<@spring.message "handaccount.accountdate"/>',
                width: 220,
                editor: function (container, options) {
                    var input = $('<input name="' + options.field + '"/>');
                    input.appendTo(container);
                    input.kendoDatePicker({
                        format: "yyyy-MM-dd"
                    });
                }
            },
            {
                // 交易记录
                field: "交易记录",
                title: '交易记录',
                width: 120,
                template: function (dataItem) {
                    return '<a onclick="openTransferHis(' + dataItem.bankAccountNum + ')"><span>交易记录</span></a>'
                }
            },
            {
                field: "amountFrom",
                title: '交易记录',
            },
            {
                field: "amountTo",
                title: '交易记录',
            }
        ],
        editable: true
    });

    function openTransferForm() {
        // 交易表格
        $('body').append('<div id="invoiceOageInfo"> </div>');
        var win = $("#invoiceOageInfo").kendoWindow({
            actions: ["Close"],
            height: "300px",
            width: "25%",
            draggable: true,
            title: "转账",
            visible: false,
            iframe: true,
            modal: true,
            resizable: true,
            content: "transferForm.html",
            close: function (e) {
            }
        }).data("kendoWindow");
        win.center().open();
    }

    function openTransferHis(bankAccountNum) {
        // 交易记录
        $('body').append('<div id="invoiceTransferHis"> </div>');
        var win = $("#invoiceTransferHis").kendoWindow({
            actions: ["Close"],
            height: "400px",
            width: "80%",
            draggable: true,
            title: "交易记录",
            visible: false,
            iframe: true,
            modal: true,
            resizable: true,
            content: "hand_account_transfer_his.html?bankAccountNum=" + bankAccountNum,
            close: function (e) {
            }
        }).data("kendoWindow");
        win.center().open();
    }
</script>
<script>
    grid.data("kendoGrid").hideColumn("accountId");
</script>
</body>